<template>
  <main>

  <div class="main-content">
    <p class="maintitle">全部订单</p>

   
      <el-row style="margin-right: 20px; display: flex; flex-direction: row; flex-wrap: wrap;">
        <div class="inputdiv">
          <span>订单号:</span>
          <el-input
            style="width:200px;"
            v-model="getListData.no"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>
      
        <div class="inputdiv">
          <span>业务员:</span>
          <el-input
            style="width:200px;"
            v-model="getListData.salesman"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>
      
        <div class="inputdiv">
          <span>客户号:</span>
          <el-input
            style="width:200px;"
            v-model="getListData.cstmr_num"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>
          
        <div class="inputdiv">
          <span>客户名:</span>
          <el-input
            style="width:200px;"
            v-model="getListData.cstmr_name"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>

        <div class="inputdiv">
          <span>添加时间:</span>
          <el-date-picker
            v-model="getListData.created"
            type="daterange"
            range-separator="->"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
            style="width: 320px;"
          >
          </el-date-picker>
        </div>
          
        <el-button
          size="medium"
          class="filter-item"
          type="primary"
          @click="getList"
          style='margin-bottom: 10px;'
          >查询</el-button
        >
        <el-button  
          size="medium" 
          class="filter-item" 
          @click="resetSearch"
          style='margin-bottom: 10px;'
          >重置</el-button
        >
      </el-row>
      <el-row style="margin-top: 20px">
        <el-button size="medium" class="filter-item" type="danger" @click="statusSelect('0')"
          >未提交</el-button
        >
        <el-button size="medium" class="filter-item" type="success"  @click="statusSelect('1')"
          >已提交</el-button
        >
        
        <el-button size="medium" type="primary" @click="exportOrder"
          >订单导出</el-button
        >
        <el-button size="medium" type="primary" @click="submitAll">一键提交</el-button
        >
      </el-row>

    <el-table
      :data="tableData"
      style="width: 95%; text-align: center; margin: 15px 0 0 30px;"
      ref="accountTable"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="no" label="订单号" width="180" align="center">
        <template slot-scope="{ row }">
          <router-link :to="`pInfo/${row.id}`">
            <span style="color: #66acf1">{{ row.no }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="下单数量"  align="center">
      </el-table-column>
      <el-table-column
        prop="salesman"
        label="业务员"
     
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="cstmr_num"
        label="客户号"
      
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="cstmr_name"
        label="客户名"
      
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="created"
        label="添加时间"
       
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <!-- <el-button size="mini" type="text" @click="handleEdit(row)"
            >编辑订单</el-button
          > -->
           <el-popconfirm
            confirm-button-text="确认"
            v-if="row.status == 0"
            cancel-button-text="取消"
            title="确认提交当前订单？"
            @confirm="orderStatus(row)"
          >
          <el-button
            size="mini"
            type="text"
            slot="reference"
            >提交订单</el-button
          >
           </el-popconfirm>
          <el-button size="mini" type="text" v-else disabled>已提交</el-button>
          <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="确认删除当前订单？"
            @confirm="deleteRow(row.id)"
            style="margin-left: 10px"
          >
            <el-button size="mini" type="text" slot="reference"
              >删除订单</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      style="text-align: right; border-radius: 0 0 10px 10px; padding: 22px 16px;"
      v-show="totalPage > 0"
      :total="totalPage"
      :page.sync="getListData.pageNo"
      :limit.sync="getListData.pageSize"
      @pagination="getList"
    ></pagination>
  </div>
  </main>
</template>

<script>
import { Message } from "element-ui";
import {
  orderList,
  orderDelete,
  orderExport,
  orderStatus,
  BackSubmit,
  abolishOrder,
} from "@/app/api/order";
import { mapState } from "vuex";
import Pagination from "@/app/components/Pagination";


export default {
  components: {
    Pagination,
  },
  name: "Persinal",
  data() {
    return {
      downloadLoading: false,
      importVisible: false,
      loading: false,
      tableData: [],
      totalPage: 1,
      listLoading: true,
      getListData: {
        pageNo: 1,
        pageSize: 10,
        listType: 1, // 个人订单
      },
      dialogVisible: false,
      form: {},
      dialogStatus: "", //编辑或新增
      baseurl: api_url,
      currentSelect: '',
    };
  },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    this.getList();
  },
  mounted(){
  },
  methods: {
    submitAll() {
      this.currentSelect = this.$refs.accountTable.selection;
      console.log(this.currentSelect);
      for (let i = 0; i < this.currentSelect.length; i++) {
        // orderStatus(this.currentSelect[i]);
        orderStatus({ id: this.currentSelect[i].id })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "操作成功",
              type: "success",
              duration: 2 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("orderStatus error", error);
        });
      }
    },
    exportOrder() {
      this.downloadLoading = true;
      orderExport(this.getListData)
        .then((res) => {
          this.downloadLoading = false;
          window.location.href = this.baseurl + "/" + res.data.path;
        })
        .catch((err) => {
          this.downloadLoading = false;
        });
    },
    resetSearch() {
      this.getListData.no = "";
      this.getListData.cstmr_name = "";
      this.getListData.cstmr_num = "";
      this.getListData.salesman = "";

      this.getListData.created = [];
      this.getListData.status = "";
      this.getList();
    },
    getList() {
      console.log('1');
      orderList(this.getListData)
        .then((res) => {
          this.tableData = res.data.ret;
          this.totalPage = res.data.count;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    deleteRow(oid) {
      orderDelete({ oid })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "删除成功",
              type: "success",
              duration: 5 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("save error", error);
        });
    },
    orderStatus(row) {
      console.log(row);
      orderStatus({ id: row.id })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "操作成功",
              type: "success",
              duration: 2 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("orderStatus error", error);
        });
    },
    statusSelect(status){
      if(this.session.role_id == 4 && status == 1){
        status = 2;
      }
      this.getListData.status = status
      this.getList();
    },
    tableRowClassName({row, rowIndex}) {
      
      if (row.status > 0) {
        return 'success-row';
      } else if (row.status == 0) {
        return 'warning-row';
      }
      return '';
    },
  },
};
</script>

<style>
.main-content{
  width: 98%;
  height: 840px;
  margin: 1% auto;
  border-radius: 10px;
  box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.25);
  background-color: #fbfbfb;
  padding: 0px;
  position: relative;
}
.maintitle{
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  color: #000000;
  margin: 10px 0 20px 10px;
}
.el-table .warning-row {
  background: #FFE8E8;
}
.el-table .success-row {
  background: #E8FFE8;
}
.inputdiv{
  /* margin-right: 20px; */
  margin: 0 15px 10px 0;
}
</style>
